//@ts-nocheck
// import React from 'react';
import React from '../../react';
// import ReactDOM from 'react-dom';
import ReactDOM from '../../react/react-dom';

const style = {border: '3px solid red', margin: '5px'};
const element = (
  <div id="A1" style={style}>
    A1
    <div id="B1" style={style}>
      B1
      <div id="C1" style={style}>C1</div>
      <div id="C2" style={style}>C2</div>
    </div>
    <div id="B2" style={style}>B2</div>
  </div>
);
console.log('element:', element);
/*
element:
{$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}

$$typeof: Symbol(react.element)
key: null
props:
  children: Array(3)
    0: "A1"
    1: {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}
    2: {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}
    length: 3
    __proto__: Array(0)
  id: "A1"
  style: {border: "3px solid red", margin: "5px"}
  __proto__: Object
ref: null
type: "div"
_owner: null
_store: {validated: false}
_self: null
_source: null
__proto__: Object
*/
ReactDOM.render(
  element,
  document.getElementById('root')
);

/** 修改内容 新增节点*/
const render2 = document.getElementById('render2');
render2.addEventListener('click',()=>{
  const element2 = (
    <div id=" A1-new" style={style}>
      A1-new
      <div id="B1-new" style={style}>
        B1-new
        <div id="C1-new" style={style}>C1-new</div>
        <div id="C2-new" style={style}>C2-new</div>
      </div>
      <div id="B2-new" style={style}>B2-new</div>
      <div id="B3" style={style}>B3</div>
    </div>
  );

  ReactDOM.render(
    element2,
    document.getElementById('root')
  );
})

/** 修改内容 删除节点*/
const render3 = document.getElementById('render3');
render3.addEventListener('click',()=>{
  const element3 = (
    <div id="A1-new2" style={style}>
      A1-new2
      <div id="B1-new2" style={style}>
        B1-new2
        <div id="C1-new2" style={style}>C1-new2</div>
        <div id="C2-new2" style={style}>C2-new2</div>
      </div>
      <div id="B2-new" style={style}>B2-new2</div>
    </div>
  );

  ReactDOM.render(
    element3,
    document.getElementById('root')
  );
})
